<template>
  <user-header />
  <div class="mt-[25.5px]">
    <user-list @click="to(1)">
      <template #img>
        <img src="../../assets/icon/user_exam.png" class="w-[24.5px]" />
      </template>
      <template #title> 我的考试 </template>
    </user-list>
    <user-list @click="to(2)">
      <template #img>
        <img src="../../assets/icon/user_error.png" class="w-[24.5px]" />
      </template>
      <template #title> 错题集 </template>
    </user-list>
    <user-list @click="to(3)">
      <template #img>
        <img src="../../assets/icon/user_result.png" class="w-[24.5px]" />
      </template>
      <template #title> 我的成绩 </template>
    </user-list>
  </div>
  <footer class="flex justify-center mt-[50px] enter-y">
    <var-button type="danger" size="large" color="#12B7ED" @click="logOut">
      <var-icon name="power" />
      <span> 退出登录 </span>
    </var-button>
  </footer>
</template>

<script setup lang="ts">
  import { useUserInfoStoreWithOut } from '@/stores/modules/userInfo';
  import UserHeader from './components/UserHeader.vue';
  import UserList from './components/UserList.vue';
  const router = useRouter();
  const to = (i: number) => {
    switch (i) {
      case 1:
        router.push({ name: 'examlist' });
        break;

      case 2:
        router.replace({ name: 'errorTopic' });
        break;

      case 3:
        router.push({ name: 'statistical' });
        break;
    }
  };
  const logOut = () => {
    const userinfo = useUserInfoStoreWithOut();
    userinfo.logOut();
  };
</script>

<style scoped>
  :deep(.var-button__content) {
    @apply flex items-center;
  }
  :deep(.var-button) {
    @apply w-[40.533333vw] rounded-[16px];
  }
</style>
